<template>
	<view>
		 <calendar 
        :lunar="true"
		:date="newDate"
        :start-date="'2018-7-1'"
        :end-date="'2021-1-1'"
		:selected = "selected"
        @change="change"
        @to-click="toClick"
         />
		<neil-modal :show="show" @close="closeModal" :title="clicktime" confirm-text="确定" :show-cancel="false">
			<view style="min-height: 90upx;padding: 32upx 24upx;">
				<view>上班：{{cardData.hr_attend_startWork?cardData.hr_attend_startWork:'无打卡记录'}}</view>
				<view>下班：{{cardData.hr_attend_knockOff?cardData.hr_attend_knockOff:'无打卡记录'}}</view>
			</view>
		</neil-modal>
		<!-- <view v-if="show==true" class="tipsbox" @click="closeModal">
			<view class="tipsbox-main">
				<view class="tipsbox-main-line">
					{{clicktime}}
				</view>
				<view class="tipsbox-main-line" style="text-align: left;padding-left: 20upx;">
				<view>上班：{{cardData.hr_attend_startWork?cardData.hr_attend_startWork:'无打卡记录'}}</view>
				<view>下班：{{cardData.hr_attend_knockOff?cardData.hr_attend_knockOff:'无打卡记录'}}</view>
				</view>
				<view class="tipsbox-main-line" @click="closeModal">
					确定
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import {apiGetCardDays,apiGetAppointTimeData,apigetAttendance} from '@/common/api.js'
	import neilModal from '@/components/neil-modal/neil-modal.vue'
	import calendar from "@/components/uni-calendar/uni-calendar"
	const date = new Date()
	export default {
		components: {
			calendar,
			neilModal,
		},
		data() {
			return {
				selected: [],
				timer:null,
				year: date.getFullYear(),
				month:date.getMonth() + 1,
				newDate:date.getFullYear()+'-'+(date.getMonth() + 1)+'-'+date.getDate(),
				cardData:{},
				clicktime:"",
				show:false,
				Attendance:[]
			};
		},
		onLoad () {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.getCardDays(this.year,this.month)
			//this.getAttendance(this.year,this.month)
		},
		onPullDownRefresh(){
			setTimeout(()=>{
				this.getCardDays(this.year,this.month)
			}, 1000);
		},
		watch:{
			month (e) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.getCardDays(this.year,e)
			}
		},
		methods: {
			getAttendance(year,month){
				apigetAttendance({
					hr_attend_startWork:year,
					hr_attend_knockOff:month
				}).then(res=>{
					this.Attendance=[["全勤",res.data.data.totalDayNum],
					["早退",res.data.data.LeaveEarlyDayNum],
					["迟到",res.data.data.comeLateDayNum]]
				})
			},
			change(e) {
				this.year = e.year
				this.month = e.month
			},
			toClick(e) {
				let time=e.clockinfo.date
				// uni.showLoading({
				// 	mask: true
				// })
				if(time){
					this.clicktime="日期："+time
					this.getAppointTimeData(time)
				}else{
					this.toast('当天无打卡记录')
				}
								
			},
			//获取当月打卡记录
			getCardDays(year,month){
				apiGetCardDays(year,month).then(res=>{
					uni.hideLoading()
					uni.stopPullDownRefresh()//有下拉刷新会关闭下拉刷新
					this.selected = res.data.data
				}).catch(err=>{
					uni.hideLoading()
					uni.stopPullDownRefresh()//有下拉刷新会关闭下拉刷新
					this.toast('数据异常');
				})
			},
			//获取指定天数打卡信息*******
			getAppointTimeData(times){
				apiGetAppointTimeData(times).then((res)=>{
					//uni.hideLoading()
					const data = res.data.data
					this.cardData = {
						hr_attend_startWork:data.hr_attend_startWork,
						hr_attend_knockOff:data.hr_attend_knockOff
					}
					this.show = true
				}).catch(err=>{
					//uni.hideLoading()
					this.toast('数据异常')
				})
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			},
			closeModal () {
				this.show = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tipsbox{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content:center;
		position: fixed;
		top:0;
		left:0;
		background:rgba(0,0,0,0.4);
		&-main{
			background: #fff;
			width: 80%;
			border-radius: 20upx;
			&-line{
				text-align: center;
				padding: 20upx 0;
				border-bottom: 1upx solid #d5d5d5;
			}
		}
	}	
</style>
